                                          <!-- 购物车组件 -->
										  
<!-- 传入属性 -->
<!-- shoppingLeftList:购物车左边图标显示数组
          数组成员结构：（最多支持3个成员，按照此数组结构，依次添加三个数组成员即可）  默认一个展示
      [{
            cartImg: "https://oss4.komect.com/equity-home/h5/gwc.png",   图片地址
            cartTitle: "购物车",                                          标题
            color: "",                                                    字体颜色
            shoppingCartNum: 0,                                           购物车显示数量（如果需要就传，不需要则不用添加此属性）
      }]

     shoppingCartMaxNum: 购物车红点显示数量最大单位  （超过后变成 XX+ 形式） 默认99
     shoppingCartMinNum:购物车红点显示数量最小单位  （低于 则不显示红点） 默认1
     cartsOnlyBtn: 购物车右部唯一按键名称             默认  立即购买
     cartRightLeftBtn: 购物车右部左按键名称           默认  加入购物车
     cartRightRightBtn:购物车右部右按键名称           默认  立即购买
     OnlyBtnBack: 右边唯一按键背景颜色                默认#30b88f
     OnlyBtnColor: 右边唯一按键字体颜色               默认#ffffff
     inShoppingCartBack:右边功能按键左按键背景颜色    默认#30b88f
     inShoppingCartColor:右边功能按键左按键字体颜色   默认#ffffff
     shoppingBuyBackColor:右边功能按键右按键背景颜色  默认#ffd98c
     shoppingBuyColr:右边功能按键右按键字体颜色       默认#5d3d07

     ifShowTwoBtn:判断是否展示两个按键            默认true  （true展示两个按键  false展示一个按键）
     ifBtnRadius:判断是否开启按键圆角             默认false
     ifBtnCenter:判断是否开启按键居中显示         默认false
     ifBtnHalfRadius: 判断是否开启按键半圆角      默认false  (左边按键 左边半圆  右边按键  右边半圆)
			      注：1.ifBtnHalfRadius（半圆角）不可与 ifBtnRadius（圆角）同时为true ，否则只会是有ifBtnRadius（圆角）效果
                2.单独一个按键时 (ifShowTwoBtn 为 false 时) 不会存在半角属性 -->

<!-- 传入函数 -->
<!-- shoppingCartLeftBtn：购物车左边带图标按键 传入对应的数组位置信息，方便确定位置使用其他方法
     onlyBtn：右边唯一按键点击函数
     inToShoppingCart：右边功能按键左函数
     nowGoToBuy：右边功能按键右函数	
             注： 若是只存在唯一按键onlyBtn时，不需要去引用  inToShoppingCart函数 和  nowGoToBuy函数-->								  

<template>
  <div class="theShoppingCart">
    <!-- 左边购物车图标部分 -->
    <!-- ------------------------------------------------------------------- -->
    <!-- 根据展示数组   shoppingLeftList  的长度显示不同外部的样式 -->
    <div
      class="theShoppingCart-left"
      :class="{
        leftOne: shoppingLeftList.length == 1 || shoppingLeftList.length == 0,
        leftTow: shoppingLeftList.length == 2,
        leftThree: shoppingLeftList.length == 3,
      }"
    >
      <!-- 购物车图标按键成员 根据渲染展示数组 shoppingLeftList 进行渲染 -->
      <div
        v-for="(value, index) in shoppingLeftList"
        :key="index"
        class="theShoppingCart-lef-item"
        @click="cartLeftBtn(index)"
      >
        <!-- 购物车图片 -->
        <div
          class="theShoppingCart-left-item-img"
          :style="{ backgroundImage: 'url(' + value.cartImg + ')' }"
        ></div>
        <!-- 购物车标题 -->
        <div
          class="theShoppingCart-left-item-title"
          :style="{ color: value.color }"
        >
          {{ value.cartTitle }}
        </div>
        <!-- 上方红点部分 -->
        <!-- 如果数组中不存在红点显示数量shoppingCartNum 则直接隐藏
             如果显示数量shoppingCartNum 小于最低显示数量shoppingCartMinNum也会隐藏
             根据红点显示数量的多少进行展示不同样式  标准是 个位数oneNum  两位数（默认） 超过最高值shoppingCartMaxNum的展示 xx+数 threeNum
             若是  shoppingLeftList  数组成员达到了3个则执行不同的样式  listThree  -->
        <div
          class="theShoppingCart-left-item-num"
          v-if="value.shoppingCartNum || value.shoppingCartNum == 0"
          v-show="shoppingCartMinNum <= value.shoppingCartNum"
          :class="{
            oneNum: value.shoppingCartNum < 10,
            threeNum: value.shoppingCartNum > shoppingCartMaxNum,
            listThree: shoppingLeftList.length == 3,
          }"
        >
          <!-- 做判断，如果传入的数量超过了规定的最大值则显示xx+ -->
          {{
            value.shoppingCartNum > shoppingCartMaxNum
              ? shoppingCartMaxNum + "+"
              : value.shoppingCartNum
          }}
        </div>
      </div>
    </div>

    <!-- 右边功能按键部分 -->
    <!-- 根据开关  ifShowTwoBtn  判断展示两个按键  或  一个按键 -->
    <!-- ------------------------------------------------------------------- -->
    <div class="theShoppingCart-right" :class="{ BtnCenter: ifBtnCenter }">
      <!-- 单独一个按键时 不会存在半角属性-->
      <!-- ========================================================= -->
      <div
        v-if="!ifShowTwoBtn"
        class="theShoppingCart-right-onlyBtn"
        @click="onlyBtn"
        :style="[
          { backgroundColor: '' + this.OnlyBtnBack + '' },
          { color: '' + this.OnlyBtnColor + '' },
        ]"
        :class="{ BtnRadius: ifBtnRadius }"
      >
        {{ cartsOnlyBtn }}
      </div>

      <!-- 展示两个按键时 -->
      <!-- ========================================================= -->
      <!-- 右边功能按键左按键 -->
      <div
        v-if="ifShowTwoBtn"
        class="theShoppingCart-right-toCartBtn"
        @click="inShoppingCart"
        :style="[
          { backgroundColor: '' + this.inShoppingCartBack + '' },
          { color: '' + this.inShoppingCartColor + '' },
        ]"
        :class="{ BtnRadius: ifBtnRadius, BtnHalfRadiusleft: ifBtnHalfRadius }"
      >
        {{ cartRightLeftBtn }}
      </div>
      <!-- 右边功能按键右按键 -->
      <div
        v-if="ifShowTwoBtn"
        class="theShoppingCart-right-toBuyBtn"
        @click="nowGoBuy"
        :style="[
          { backgroundColor: '' + this.shoppingBuyBackColor + '' },
          { color: '' + this.shoppingBuyColr + '' },
        ]"
        :class="{ BtnRadius: ifBtnRadius, BtnHalfRadiusright: ifBtnHalfRadius }"
      >
        {{ cartRightRightBtn }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 数据传递
    // -----------------------------------------------------------------------------------------------
    // 购物车左边图标显示数组
    shoppingLeftList: {
      type: [Array],
      default() {
        return [
          {
            // 图片地址
            cartImg: "https://oss4.komect.com/equity-home/h5/gwc.png",
            // 标题
            cartTitle: "购物车",
            // 字体颜色
            color: "",
            // 购物车红点显示数字
            shoppingCartNum: 0,
          },
        ];
      },
    },
    // 购物车红点显示数量最大单位  （超过后变成 XX+ 形式） 默认99
    shoppingCartMaxNum: {
      type: [Number, String],
      default: 99,
    },
    // 购物车红点显示数量最小单位  （低于 则不显示红点） 默认1
    shoppingCartMinNum: {
      type: [Number, String],
      default: 1,
    },
    // 购物车右部唯一按键名称  默认  立即购买
    cartsOnlyBtn: {
      type: [String],
      default: "立即购买",
    },
    // 购物车右部左按键名称  默认  加入购物车
    cartRightLeftBtn: {
      type: [String],
      default: "加入购物车",
    },
    // 购物车右部右按键名称  默认  立即购买
    cartRightRightBtn: {
      type: [String],
      default: "立即购买",
    },
    // 右边唯一按键背景颜色  默认#30b88f
    OnlyBtnBack: {
      type: [String],
      default: "#30b88f",
    },
    // 右边唯一按键字体颜色 默认#ffffff
    OnlyBtnColor: {
      type: [String],
      default: "#ffffff",
    },
    // 右边功能按键左按键背景颜色  默认#30b88f
    inShoppingCartBack: {
      type: [String],
      default: "#30b88f",
    },
    // 右边功能按键左按键字体颜色 默认#ffffff
    inShoppingCartColor: {
      type: [String],
      default: "#ffffff",
    },
    // 右边功能按键右按键背景颜色  默认#ffd98c
    shoppingBuyBackColor: {
      type: [String],
      default: "#ffd98c",
    },
    // 右边功能按键右按键字体颜色  默认#5d3d07
    shoppingBuyColr: {
      type: [String],
      default: "#5d3d07",
    },

    // 功能传递
    // -----------------------------------------------------------------------------------------------
    // 判断是否展示两个按键  true展示两个按键  false展示一个按键  默认true
    ifShowTwoBtn: {
      type: [Boolean],
      default: true,
    },
    // 判断是否开启按键圆角  默认false
    ifBtnRadius: {
      type: [Boolean],
      default: false,
    },
    // 判断是否开启按键居中显示 默认false
    ifBtnCenter: {
      type: [Boolean],
      default: false,
    },
    // 判断是否开启按键半圆角 默认false  (左边按键 左边半圆  右边按键  右边半圆)
    ifBtnHalfRadius: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    //   购物车左边带图标按键
    cartLeftBtn(index) {
      // 使用父组件函数  传入对应的数组位置信息，方便确定位置使用其他方法
      this.$emit("shoppingCartLeftBtn", { index: index });
    },

    // 右边唯一按键点击函数
    onlyBtn() {
      // 使用父组件函数
      this.$emit("onlyRightBtn");
    },

    //   右边功能按键左函数
    inShoppingCart() {
      // 使用父组件函数
      this.$emit("inToShoppingCart");
    },

    // 右边功能按键右函数
    nowGoBuy() {
      // 使用父组件函数
      this.$emit("nowGoToBuy");
    },
  },
};
</script>

<style>
/* 购物车组件 */
.theShoppingCart {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0px -2px 6px 0px rgba(209, 209, 209, 0.38);
  display: flex;
  align-items: center;
}

/* 左边购物车图标部分 */
/* ---------------------------------------------------------------------------------------- */
.theShoppingCart-left {
  height: 100%;
  display: flex;
  align-items: center;
}
/* 成员只有1个时 */
.leftOne {
  width: 94px;
  justify-content: center;
}
/* 成员只有2个时 */
.leftTow {
  width: 95px;
  justify-content: space-around;
  margin-right: 5px;
}
/* 成员只有3个时 */
.leftThree {
  width: 110px;
  justify-content: space-around;
}

/* 购物车成员 */
/* ======================================================================== */
.theShoppingCart-lef-item {
  width: 36px;
  height: 39px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* 购物车图片 */
.theShoppingCart-left-item-img {
  width: 22px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 标题 */
.theShoppingCart-left-item-title {
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #808080;
  line-height: 17px;
  margin-top: 2px;
}
/* 购物车数量显示 */
.theShoppingCart-left-item-num {
  height: 14px;
  background: #ff504d;
  border-radius: 7px;
  position: absolute;
  top: -5px;
  right: -20%;
  padding: 0 5px;
  font-size: 11px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 14px;
}
/* 个位数时显示样式 */
.oneNum {
  right: -10%;
}
/* 3位以上时显示样式 */
.threeNum {
  right: -40%;
}
/* 数组成员变成三个时 */
.listThree {
  transform: scale(80%);
  right: -25%;
}

/* 右边按键部分 */
/* ---------------------------------------------------------------------------------------- */
.theShoppingCart-right {
  width: 266px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
}
/* 右边唯一按键样式 */
.theShoppingCart-right-onlyBtn {
  width: 80%;
  height: 100%;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
}

/* 右边功能按键左按键 */
.theShoppingCart-right-toCartBtn {
  width: 48%;
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
}
/* 右边功能按键右按键 */
.theShoppingCart-right-toBuyBtn {
  width: 48%;
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
}

/* 自定义样式部分 */
/* ============================================================================= */
/* 按键圆角判断样式 */
.BtnRadius {
  border-radius: 20px;
}
/* 按键是否居中显示 */
.BtnCenter {
  justify-content: center;
}
/* 按键半圆角样式 */
/* 右边功能按键左按键 */
.BtnHalfRadiusleft {
  border-radius: 20px 0 0 20px;
}
/* 右边功能按键右按键 */
.BtnHalfRadiusright {
  border-radius: 0 20px 20px 0;
}
</style>
